<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Sign On</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#phoneForm').hide()

            $('#passwordLogIn').on('click',function () {
                $('#passwordForm').show()
                $('#phoneForm').hide()
            })

            $('#phoneLogIn').on('click',function () {
                $('#passwordForm').hide()
                $('#phoneForm').show()
            })


            var $code = $("#code_image");
            $code.click(function (){
                this.src = "/account/kaptcha?" + new Date();
            });


            $('#sendBtn').on('click',function () {
                sendCode();
            })
            function sendCode(){
                var memPhone = $("#phonenumber").val();
                console.log(memPhone.length);
                if(memPhone == '' || memPhone.length != 11){
                    layer.msg("请输入正确的手机号！");
                    return;
                }else{
                    $.post({
                        url:"/account/getPhoneCode",
                        data:{
                            'phonenumber': memPhone
                        },
                        success: function () {
                            timer();
                        }
                    });
                }
            }

            var wait = 60;
            //倒计时
            function timer() {
                if(wait == 0){
                    $("#sendBtn").val("获取验证码");
                    $("#sendBtn").removeAttr("disabled");
                    $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
                    wait = 60;
                }else{
                    $("#sendBtn").attr("disabled","true");
                    $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
                    $("#sendBtn").val(wait + "秒后重发");
                    wait--;
                    setTimeout(function() {timer()}, 1000);
                }
            }
        });
    </script>

</head>
<body>
    <div th:replace="common/Top"></div>

    <div id="Content">
        <div id="Catalog">
            <table>
                <tr>
                    <td>
                        <input type="button" value="密码登录" id="passwordLogIn">
                    </td>
                    <td>
                        <input type="button" value="手机登录" id="phoneLogIn">
                    </td>
                </tr>
            </table>



            <form id="passwordForm" action="/account/checkLogIn" method="post">
                <table>
                    <tr>
                        <th>Username:</th>
                        <td>
                            <input id="username" type="text" name="username">
                        </td>
                    </tr>
                    <tr>
                        <th>Password:</th>
                        <td><input type="password" name="password"/></td>
                    </tr>

                    <tr>
                        <th>Verification code:</th>
                        <td>
                            <input type="text" name="code" style="width: 60px">
                            <img id="code_image" style="width: 88px;height: 22px;position: absolute;+margin-top:1px;margin-left: 5px" src="/account/kaptcha">
                        </td>
                    </tr>

                    <tr th:if="${session.codeError} != null">
                        <td colspan="2"  style="color: red" th:text="${session.codeError}"></td>
                    </tr>

                    <tr th:if="${session.message} != null">
                        <td colspan="2"  style="color: red" th:text="${session.message}"></td>
                    </tr>
                </table>
                <td colspan="2"><input type="submit" name="signon" value="Login" ></td>
            </form>

            <form id="phoneForm" action="/account/checkPhoneLogIn" method="post">
                <table>
                    <tr>
                        <th>Phone number:</th>
                        <td>
                            <input type="text" id="phonenumber" name="phonenumber" style="width: 100px" placeholder="请输入手机号" autocomplete="off"  class="layui-input"/>
                            <input type="button" class="layui-btn layui-btn-primary" value="获取验证码" id="sendBtn" style="width:80px;margin-left: 8px;border-color:#1e9fff !important;"/>
                        </td>
                    </tr>
                    <tr>
                        <th>Verification code:</th>
                        <td>
                            <input type="text" name="phonecode" style="width: 60px">
                        </td>
                    </tr>

                    <tr th:if="false">
                        <td colspan="2"  style="color: red">${sessionScope.codeError}</td>
                    </tr>

                    <tr th:if="false">
                        <td colspan="2"  style="color: red">${sessionScope.accountNotExist}</td>
                    </tr>
                </table>
                <td colspan="2"><input type="submit" name="signon" value="Login" ></td>
            </form>

            Need a username and password?
            <a href="/account/register">Register Now!</a>
        </div>
    </div>

    <div th:replace="common/Bottom"></div>
</body>
</html>